<template>
<div v-loading="isloading" class="categroy-container">
    <h2>文章分类</h2>
    <RightList :list="list" @select="hanleSelect" ></RightList>
</div>
  
  
</template>

<script>
import fetchData from '../../../mixins/fetchData';
import RightList from './RightList.vue';
import {getBlogTypes} from "../../../api/blog"
export default {
    mixins:[fetchData([])],
    components: { RightList },
    computed:{
        limit(){
       return  +this.$route.query.limit || 10;
        },
        categoryId() { 
            return  +this.$route.params.categoryId || -1;
            },
    
        list(){
        const collection =this.data.reduce((a,b)=>a+b.articleCount,0)
      const result=[{name:'全部',id:-1,articleCount:collection},
      ...this.data];
      return result.map(it=>(
          {isSelect:it.id === this.categoryId,
          aside:`${it.articleCount}篇`,
          ...it}    
      ))

        }
    },
    methods:{
        async fetchData(){
           return await getBlogTypes();
           
        },
hanleSelect(item){
const query={
            page:1,
            limit:this.limit,
        };
     //不带有分类的 跳转页
           if(item.id=== -1){
          this.$router.push({
           name:"Blog",
           query,
       })
       }else{
                //带有分类的本分类跳转页
         this.$router.push({
           name:"CategoryBlog",
           query,
           params:{
               categoryId:item.id,
           }
           })
           }
  }
 }
}
</script>

<style lang="less" scoped>
.categroy-container{
    box-sizing:border-box;
    overflow-y: auto;
   width: 300px;
   height: 100%; 
   padding: 20px;
   position: relative;
   h2{
   font-weight: bold;
   font-size: 1em;
   letter-spacing: 2px;
   margin:0;
   }
}

</style>